<template>
  <div id="topic-detail">
    <div class="nav">
      <van-nav-bar title="专题详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <img :src="info.data.item_pic_url" alt class="img img-first" />
    <img src="//yanxuan.nosdn.127.net/75c55a13fde5eb2bc2dd6813b4c565cc.jpg" class="img" />
    <img src="//yanxuan.nosdn.127.net/e27e1de2b271a28a21c10213b9df7e95.jpg" class="img" />
    <img src="//yanxuan.nosdn.127.net/9d413d1d28f753cb19096b533d53418d.jpg" class="img" />
    <img src="//yanxuan.nosdn.127.net/64b0f2f350969e9818a3b6c43c217325.jpg" class="img" />
    <img src="//yanxuan.nosdn.127.net/a668e6ae7f1fa45565c1eac221787570.jpg" class="img" />
    <img src="//yanxuan.nosdn.127.net/0d4004e19728f2707f08f4be79bbc774.jpg" class="img" />
    <img src="//yanxuan.nosdn.127.net/79ee021bbe97de7ecda691de6787241f.jpg" class="img" />

    <ul class="detail-list">
      <li class="title">专题推荐</li>
      <router-link tag="li" :to="`/topic/topicdetail?id=${item.id}`" class="item" v-for="item in info.recommendList" :key="item.id">
        <img :src="item.scene_pic_url" alt class="item-img" />
        <div class="van-ellipsis desc">{{item.title}}</div>
      </router-link>
    </ul>
  </div>
</template>

<script>
import { detailaction } from "@/api/topic/topicDetail";
export default {
  data() {
    return {
      info: "",
    };
  },
  created() {
    detailaction({
      id: this.$route.query.id,
    }).then((res) => {
      this.info = res;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
#topic-detail {
  background-color: rgb(244, 244, 244);
}
.nav {
  position: fixed;
  width: 375px;
  top: 0;
  left: 0;
  z-index: 99;
}
.img {
  width: 375px;
}
.img-first {
  margin-top: 45px;
  height: 210px;
}
.detail-list {
  width: 375px;
  padding: 0 15px 15px;
  box-sizing: border-box;
  .title {
    width: 345px;
    height: 50px;
    margin: 15px 0;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    color: rgb(175, 175, 175);
  }
  .item {
    width: 345px;
    padding: 11px;
    margin-bottom: 11px;
    background-color: #fff;
    box-sizing: border-box;
    .item-img {
      width: 321px;
      height: 140px;
    }
    .desc {
      margin: 19px 0;
    }
  }
  :last-child{
    margin-bottom: 0;
  }
}
</style>